import React, { useEffect, useState } from 'react';
import style from './index.module.css'; // 引入样式
import { getChongZhi } from '../../../../request/index'; // 导入获取数据的 API 请求
import { Table, Modal, ConfigProvider, DatePicker, Space, theme, Button, Form, Input, Radio } from 'antd'; // 导入 Ant Design 的 Table 组件
import type { TableProps, DatePickerProps, FormProps } from 'antd'; // 引入类型定义
import type { Dayjs } from 'dayjs'; // 引入 Dayjs 类型定义
// 国际化
import locale from 'antd/locale/zh_CN'; // 引入中文 locale
import dayjs from 'dayjs'; // 引入 dayjs
import 'dayjs/locale/zh-cn'; // 引入中文 locale
import * as XLSX from 'xlsx'; // 引入 xlsx 库
dayjs.locale('zh-cn'); // 设置 dayjs 的 locale 为中文

// 数据类型定义
interface DataType {
    id: any; // ID
    name: string; // 用户名
    title: string; // 店铺名称
    phone: string; // 手机号
    yewu: string; // 业务类型
    liushui: string; // 流水类型
    time: string; // 时间
    qian: any; // 果币金额
    dian: string; // 店铺相关信息
}
// 新增
type FieldType = {
    id: number;
    name: string;
    title: string;
    phone: string;
    dan: string;
    yewu: string;
    liushui: string;
    qian: number;
    time: any;
};
function Index() {
    const [biao, setBiao] = useState('')
    const { token } = theme.useToken(); // 获取主题相关的 token
    const style1: React.CSSProperties = {
        border: `1px solid ${token.colorPrimary}`, // 根据主题设置边框颜色
        borderRadius: '50%', // 设置圆角
    };
    const [form] = Form.useForm();
    // 自定义日期选择器的单元格渲染函数
    const cellRender: DatePickerProps<Dayjs>['cellRender'] = (current, info) => {
        if (info.type !== 'date') {
            return info.originNode; // 如果不是日期类型，返回原始节点
        }
        if (typeof current === 'number' || typeof current === 'string') {
            return <div className="ant-picker-cell-inner">{current}</div>; // 返回当前单元格的内容
        }
        return (
            <div className="ant-picker-cell-inner" style={current.date() === 1 ? style1 : {}}>
                {current.date()} {/* 返回日期 */}
            </div>
        );
    };

    // 状态变量
    const [selectedValue, setSelectedValue] = useState(""); // 选择的业务类型
    const [search, setSearch] = useState(''); // 搜索框的内容
    const [table, setTable] = useState<DataType[]>([]); // 存储从 API 获取的完整数据
    const [filteredTable, setFilteredTable] = useState<DataType[]>([]); // 存储过滤后的数据

    // 处理下拉选择变化
    const handleChange = (event) => {
        setSelectedValue(event.target.value); // 更新选择的业务类型
    };

    // 处理搜索框变化
    const handleSearchChange = (e) => {
        setSearch(e.target.value); // 更新搜索框的内容
    };

    // 搜索函数
    const SEARCH = () => {
        const filteredData = table.filter(item =>
            item.title.toLowerCase().includes(search.toLowerCase()) // 根据店铺名称过滤数据
        );
        setFilteredTable(filteredData); // 更新过滤后的数据
    };

    // 组件挂载后获取数据
    useEffect(() => {
        getChongZhi().then((res) => {
            setTable(res.data); // 设置完整数据
            setFilteredTable(res.data); // 初始化过滤后的数据为完整数据
        });
    }, []);

    // 表格列配置
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'id', // 对应数据中的 ID 字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '用户名',
            dataIndex: 'name', // 对应数据中的用户名字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '店铺名称',
            dataIndex: 'title', // 对应数据中的店铺名称字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '手机号',
            dataIndex: 'phone', // 对应数据中的手机号字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '业务单据',
            dataIndex: 'dan', // 对应数据中的业务单据字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '业务类型',
            dataIndex: 'yewu', // 对应数据中的业务类型字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '流水类型',
            dataIndex: 'liushui', // 对应数据中的流水类型字段
            render: (text) => <a>{text}</a>, // 渲染为链接
        },
        {
            title: '果币(元)',
            dataIndex: 'qian', // 对应数据中的果币金额字段
        }
    ];

    // 弹出层
    const [isModalOpen, setIsModalOpen] = useState(false);



    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 充值
    const ChongZhiBtn = () => {
        setIsModalOpen(true);
        setBiao('充值')
    }
    // 新增
    const addTable = () => {
        setIsModalOpen(true);
        setBiao('新增')
    }
    const onFinish = (values: FieldType) => {
        console.log(123);
        
        // Generate a unique ID for the new entry 
        const newEntry: DataType = { id: Date.now(), ...values };
        setFilteredTable([newEntry,...table ]); // 添加新数据
        setIsModalOpen(false); // 关闭弹窗
        form.resetFields(); // Reset the form fields
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const DaoChu = () => {
        const ws = XLSX.utils.json_to_sheet(filteredTable); // 将 JSON 转换为工作表
        const wb = XLSX.utils.book_new(); // 创建新工作簿
        XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 将工作表添加到工作簿
        XLSX.writeFile(wb, "数据导出.xlsx"); // 导出 Excel 文件
    }
    return (
        <div className={style.box}>
            <>

                <Modal title={biao} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    {
                        biao === '新增' ? <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off" form={form}
                        >
                            {/* 新增表单 */}

                            <Form.Item<FieldType>
                                label="序号"
                                name="id"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="用户名"
                                name="name"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="店铺名称"
                                name="title"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="手机号"
                                name="phone"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="业务单据"
                                name="dan"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="业务类型"
                                name="yewu"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="流水类型"
                                name="liushui"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item<FieldType>
                                label="果币(元)"
                                name="qian"
                                rules={[{ required: true, message: '不能为空!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">添加</Button>
                            </Form.Item>
                        </Form> : <div className={style.CHONGZHI}>
                            <h1>&emsp;果币充值</h1><br />
                            <hr /><br />
                            <p>&emsp;充值类型 <Radio.Group name="radiogroup" defaultValue={1}>
                                <Radio value={1}>平台果币</Radio>
                                <Radio value={2}>店铺果币</Radio>
                            </Radio.Group></p><br />
                            <p>手机号 <input type="text" style={{ height: "100px", width: "400px" }} placeholder='请输入手机号(可批量输入)' /></p><br />
                            <p>&emsp;充值金额 <input type="text" />元</p><br />
                            <p>&emsp;赠送金额 <input type="text" />元</p><br />
                            <p>管理员密码 <input type="text" /> <span style={{ color: "blue" }}>忘记密码?</span></p><br />
                        </div>
                    }
                </Modal>
            </>
            <h3 style={{ margin: "2% 0" }}>果币</h3> {/* 标题 */}
            <div style={{ display: "flex" }}>
                {/* 业务类型下拉选择 */}
                <select className={style.XiaLa} value={selectedValue} onChange={handleChange}>
                    <option value="" disabled>业务类型</option>
                    <option value="recharge">充值</option>
                    <option value="order">订单消费</option>
                    <option value="refund">退款</option>
                </select>
                {/* 店铺名称输入框 */}
                <p>店铺名称: <input type="text" placeholder='&emsp;请输入店铺名称' className={style.inp} onChange={handleSearchChange} /></p>
                {/* 手机号输入框 */}
                <p style={{ marginLeft: "3%" }}>手机号: <input type="text" placeholder='&emsp;请输入手机号码' className={style.inp} /></p>
            </div>
            <div>
                <ConfigProvider locale={locale}> {/* 配置 Ant Design 的国际化 */}
                    日期查询: <Space size={12} direction="vertical" className={style.RiQi}>
                        <DatePicker.RangePicker cellRender={cellRender} /> {/* 日期范围选择器 */}
                    </Space>
                    {/* 查询和导出按钮 */}
                    <Button type="primary" onClick={SEARCH}>查询</Button>
                    <Button onClick={DaoChu}>导出</Button>
                </ConfigProvider>
            </div>
            <div>
                <Button onClick={ChongZhiBtn}>充值</Button>
                <Button onClick={addTable}>新增</Button>
            </div>
            {/* 渲染表格，使用过滤后的数据 */}
            <Table<DataType> columns={columns} dataSource={filteredTable} />
        </div>
    );
}

export default Index; // 导出组件

